<template>
	<view style="margin-top: 100rpx;">
		<uni-calendar
		    :insert="true"
		    :lunar="true"
			:selected="hasCheckedDateList"
			@change="change"
		     />
		<view class="conetnt">
			
		</view>
		<view class="checkLan">
			<view class="left">累计打卡次数：<text class="count">{{hasCheckedDateList.length}}</text></view>
			<view class="right">
				<button style="margin-right: 10px" @tap="refreshLocation">刷新位置</button>
				<button type="primary" @tap="makeACheck" :disabled="isOver ? true : false">运动打卡</button>
			</view>
		</view>
		<view class="msgLan">
			<view class="msgLanItem">
				<view class="itemLeft">
					本周打卡次数：
				</view>
				<view class="itemRight">
					{{weekCount}}
				</view>
				<view class="itemLeft">
					本月打卡次数：
				</view>
				<view class="itemRight">
					{{monthCount}}
				</view>
			</view>
			<view class="msgLanItem">
				<view class="itemLeft">
					最长连续打卡：
				</view>
				<view class="itemRight">
					{{constantCount}}
				</view>
				<view class="itemLeft">
					运动强度等级：
				</view>
				<view class="itemRight">
					{{runRanking}}
				</view>
			</view>
			<view class="msgLanItem">
				<view class="itemLeft">
					白天次数：
				</view>
				<view class="itemRight">
					{{morningCount}}
				</view>
				<view class="itemLeft">
					黑夜次数：
				</view>
				<view class="itemRight">
					{{nightCount}}
				</view>
			</view>
			<!-- <view class="msgLanItem">
				<view class="itemLeft">
					目标经度：
				</view>
				<view class="itemRight">
					11298154
				</view>
				<view class="itemLeft">
					目标纬度：
				</view>
				<view class="itemRight">
					2815529
				</view>
			</view>
			<view class="msgLanItem">
				<view class="itemLeft">
					当前经度：
				</view>
				<view class="itemRight">
					{{currentLon}}
				</view>
				<view class="itemLeft">
					当前纬度：
				</view>
				<view class="itemRight">
					{{currentLat}}
				</view>
			</view>
			<view class="msgLanItem">
				<view class="itemLeft">
					经度差值：
				</view>
				<view class="itemRight">
					{{currentLon - 11298154}}
				</view>
				<view class="itemLeft">
					纬度差值：
				</view>
				<view class="itemRight">
					{{currentLat - 2815529}}
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import uniCalendar from "@/components/uni-calendar/uni-calendar"
	import {getRequest} from '../../https.js'
	import {dateFormat} from '../../utils/dateFormat.js'
	
	import {isWeek, isMonth} from '../../utils/isRange.js'
	import getConstantDay from '../../utils/getConstantDay.js'
	import getRunRanking from '../../utils/getRunRanking.js'
	import getDistance from '../../utils/getDistance.js'
	
	let avoidRepeat = false
	//酷体坐标
	let destinationLong = 112.9815413181
	let destinationLat = 28.155291290
	export default {
		data() {
			return {
				currentLon: '',
				currentLat: '',
				
				isOver: true,
				checkDate: '',
				hasCheckedDateList: [],
				weekCount: 0,
				monthCount: 0,
				constantCount: 1,
				runRanking: '-',
				morningCount: 0,
				nightCount: 0
			}
		},
		components:{
			uniCalendar
		},
		onLoad() {
			this.getCheckList()
			this.getLocation()
		},
		methods: {
			change(e) {
				this.checkDate = e.fulldate
				this.ischecked = e.clockinfo.have
			},
			refreshLocation(){
				uni.getLocation({
				    type: 'wgs84',
				    success: (res) => {
						this.currentLon = Math.round(res.longitude * 100000)
						this.currentLat = Math.round(res.latitude * 100000)
						if(Math.abs(res.longitude * 100000 - destinationLong * 100000) > 100 || Math.abs(res.latitude * 100000 - destinationLat * 100000) > 100){
							//超出范围
							uni.showToast({
								icon: 'none',
								title: '距离目的地' + getDistance(res.latitude, res.longitude, destinationLat, destinationLong)
							});
							return this.isOver = true
						}else{
							uni.showToast({
								title: '进入打卡范围！'
							});
							return this.isOver = false
						}
				    }
				})
			},
			getLocation(){
				uni.getLocation({
				    type: 'wgs84',
				    success: (res) => {
						this.currentLon = Math.round(res.longitude * 100000)
						this.currentLat = Math.round(res.latitude * 100000)
						if(Math.abs(res.longitude * 100000 - destinationLong * 100000) > 100 || Math.abs(res.latitude * 100000 - destinationLat * 100000) > 100){
							//超出范围
							return this.isOver = true
						}else{
							return this.isOver = false
						}
				    }
				})
			},
			getCheckList(){
				uni.showLoading({
					
				})
				getRequest('phpbin/oneday/getCheckList.php', {}).then(res => {
					uni.hideLoading()
					if(res.data.content){
						let sliceList = []
						let weekCount = 0
						let monthCount = 0
						let nightCount = 0
						let morningCount = 0
						res.data.content.list.forEach((item) => {
							if(item.date && item.date !== ''){
								sliceList.push({
									...item,
									date: dateFormat(new Date(item.date), 'yyyy-MM-dd')
								})
								
								if(isWeek(item.date)){
									weekCount ++
								}
								
								if(isMonth(item.date)){
									monthCount ++
								}
								
								let getHour = new Date(item.date).getHours()
								if(getHour >= 18) {
									nightCount ++
								}else{
									morningCount ++
								}
							}
						})
						this.constantCount = getConstantDay(sliceList)
						this.hasCheckedDateList = sliceList
						this.weekCount = weekCount
						this.monthCount = monthCount
						this.morningCount = morningCount
						this.nightCount = nightCount
						this.runRanking = getRunRanking(weekCount, monthCount, sliceList)
					}
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none',
					})
				})
			},
			makeACheck(){
				if(this.isOver){
					return uni.showToast({
						title: '超出打卡范围！',
						icon: 'none',
					})
				}
				if(this.ischecked){ // 已经打卡
					return uni.showToast({
						title: '已经打卡！',
						icon: 'none',
					})
				}
				if(dateFormat(new Date(this.checkDate.replace(/-/g, '/')), 'yyyy/MM/dd') !== dateFormat(new Date(), 'yyyy/MM/dd')){
					return uni.showToast({
						title: '只能在今日打卡哦！',
						icon: 'none',
					})
				}
				if(!this.checkDate || this.checkDate == ''){
					return uni.showToast({
						title: '请重新选择日期',
						icon: 'none',
					})
				}
				//注意ios不能解析2019-9-8 所以换成2019/9/8 但是uniCalendar需要2019-9-8这种格式
				uni.showModal({
					title: '今日确认打卡？',
					content: '每日一次，无法撤销！',
					cancelText: '手滑了',
					confirmText: '跑起来！',
					success: res => {
						if(res.confirm){
							if(avoidRepeat){
								return
							}else{
								avoidRepeat = true
							}
							getRequest('phpbin/oneday/makeCheck.php', {date: (this.checkDate.replace(/-/g, '/') + ' ' + dateFormat(new Date(), 'hh:mm:ss'))}).then(res => {
								avoidRepeat = false
								this.hasCheckedDateList.push({
									date: dateFormat(new Date(), 'yyyy-MM-dd')
								})
								uni.showToast({
									title: '打卡成功！'
								});
								this.getCheckList()
							}).catch(err => {
								uni.showToast({
									title: err,
									icon: 'none',
								})
							})
						}
					},
					fail: () => {},
					complete: () => {}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.checkLan{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 20upx;
	padding: 20upx 0;
	border-top: 1px solid #C0C0C0;
	.left{
		font-size: $uni-font-size-lg;
		.count{
			font-size: 36upx;
			color: red;
			font-weight: bold;
		}
	}
	.right{
		display: flex;
		margin: 0;
	}
}
.msgLan{
	display: flex;
	flex-direction: column;
	padding: 0 30upx;
	font-size: $uni-font-size-lg;
	.msgLanItem{
		display: flex;
		.itemLeft{
			flex: 3;
		}
		.itemRight{
			flex: 1;
			font-size: 34upx;
			color: red;
			font-weight: bold;
		}
	}
}
</style>
